<template>
	<div class="system-edit-post-container">
		<el-dialog v-model="isShowDialog" width="769px">
      <template #header>
        <div>{{'{{'}}(formData.id===0?'添加':'修改')+'{{table_info.comment}}'{{'}}'}}</div>
      </template>
		<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
		{% for item in field_info %}
        {% if item.camelName not in ['id', 'createdBy','updatedBy','createdAt','updatedAt'] %}
        <el-form-item label="{{item.comment}}" prop="{{item.camelName}}">
			<el-input v-model="formData.{{item.camelName}}" placeholder="请输入{{item.comment}}名称" clearable />
		</el-form-item>
        {% endif %}
        {% endfor %}
		</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{'{{'}}formData.id===0?'新 增':'修 改'{{'}}'}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent,ref,unref } from 'vue';
import {add{{table_info.firstUpperName}}, edit{{table_info.firstUpperName}}} from "/@/api/{{package_info.package}}/{{table_info.camelName}}/index.ts";
import { ElMessage,ElForm } from 'element-plus';

interface DialogRow {
  {% for item in field_info %}
  {% if item.camelName not in ['createdBy','updatedBy','createdAt','updatedAt'] %}
  {{ item.camelName }}:{{ item.tsType }}; // {{ item.comment }}
  {% endif %}
  {% endfor %}
}
interface {{table_info.firstUpperName}}State {
  loading:boolean;
  isShowDialog: boolean;
  formData: DialogRow;
  rules: any; // 表单校验规则
}

export default defineComponent({
	name: '{{package_info.package}}Edit{{table_info.firstUpperName}}',
	setup(props,{emit}) {
    // 使用ref创建表单引用
    const formRef = ref<InstanceType<typeof ElForm> | null>(null);
    const state = reactive<{{table_info.firstUpperName}}State>({
          loading:false,
          isShowDialog: false,
          formData: {
            {% for item in field_info %}
            {% if item.camelName not in ['createdBy','updatedBy','createdAt','updatedAt'] %}
            {% if item.tsType == 'string' %}
            {{ item.camelName }}:'', // {{ item.comment }}
            {% else %}
            {{ item.camelName }}:0, // {{ item.comment }}
            {% endif %}
            {% endif %}
            {% endfor %}
    },
    // 表单校验
    rules: {
      {% for item in field_info %}
      {% if item.camelName not in ['id', 'createdBy','updatedBy','createdAt','updatedAt'] %}
      {{item.camelName}}: [
         { required: true, message: "{{item.comment}}不能为空", trigger: "blur" }
      ],
      {% endif %}
      {% endfor %}
    },
    });
    // 打开弹窗
    const openDialog = (row?: DialogRow) => {
        resetForm();
        if(row) {
            state.formData = row;
        }
        state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.isShowDialog = false;
    };
    
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 新增
    const onSubmit = () => {
       // 如果是 ref 则返回它的内部值,否则则返回它本身
       const formWrap = unref(formRef) as any;
       if (!formWrap){
          return;
       }
       formWrap.validate((valid: boolean) => {
         if(!valid){
            // 表单校验失败
            return;
         }
         // 防止重复提交
         state.loading = true;
         // 表单校验成功
		 if(state.formData.id === 0){
            // 新增
            add{{table_info.firstUpperName}}(state.formData)
            .then(() =>{
               ElMessage.success('{{table_info.comment}}添加成功');
               closeDialog(); // 关闭弹窗
               emit('get{{table_info.firstUpperName}}List');
            }).finally(() => {
               state.loading = false;
            });
		 }else{
		    // 编辑
            edit{{table_info.firstUpperName}}(state.formData)
            .then(() =>{
               ElMessage.success('{{table_info.comment}}编辑成功');
               closeDialog(); // 关闭弹窗
               emit('get{{table_info.firstUpperName}}List');
            }).finally(() => {
               state.loading = false;
            });

		 }


       })
    };
    // 重置表单
    const resetForm = ()=>{
      state.formData = {
        {% for item in field_info %}
        {% if item.camelName not in ['createdBy','updatedBy','createdAt','updatedAt'] %}
        {% if item.tsType == 'string' %}
        {{ item.camelName }}:'', // {{ item.comment }}
        {% else %}
        {{ item.camelName }}:0, // {{ item.comment }}
        {% endif %}
        {% endif %}
        {% endfor %}
      }
      // 重置表单校验
      if(formRef.value){
        formRef.value.resetFields();
      }
    };
    // 声明
    return {
        openDialog,
        closeDialog,
        onCancel,
        onSubmit,
        formRef,
        ...toRefs(state),
    };
	},
});
</script>

<style scoped lang="scss">

</style>
